<template>
	<view>
		<view style="z-index: 1;">
			<image :src="$utils.getPic(data.imgs)" class="w-percentage-100 h-200" mode="aspectFill"></image>
		</view>
		<view class="position-absolute bg-white radius-16 w-full" style="z-index: 10; margin-top: -20px;">
			<view class="p-16">
			<view class="fs-18">{{data.title}}</view>
			<view class="flex-y-center fs-12 cl-999 py-4">
				<image src="/static/image/shiz.png" class="w-14 h-14 mr-4"></image>{{data.type == 3?'活动预约':'参观预约'}}
				<image src="/static/image/shiz.png" class="w-14 h-14 ml-30 mr-4 "></image>{{data.address||'博物馆'}}
			</view>
			
			
			<view class="time-section">
				<view class="time-title">可预约日期</view>
			</view>
			 <!-- 日期选择 -->
			  <scroll-view class="date-scroll" scroll-x>
				<view 
				  v-for="(item,index) in groupedData" 
				  :key="index"
				  :class="['date-item', { active: index === selectedDate }]"
				  @click="selectDate(item,index)"
				>
				  <text class="week">{{ item.week }}</text>
				  <text class="day">{{ item.date }}</text>
				</view>
			  </scroll-view>
		
			  <!-- 时间段选择 -->
			  <view class="time-section">
				<view class="time-title">可选时段</view>
				<view class="time-grid">
					<!--  -->
				  <view 
					v-for="(time,index) in groupedData[selectedDate].items" 
					:key="index"
					:class="['time-item', { selected: selectedTime === time.id }]"
					@click="selectTime(time)"
				  >
					{{ time.starttime  }}-{{time.endtime}}
					<!-- <view></view> -->
					 <view class="reservation-info">
						  <text class="reservation-text">({{time.reservationpeople}}/{{time.maxpeople}})</text>
						</view>
				  </view>
				</view>
			  </view>
			  
				<!-- 活动内容 -->
			  <view class="content-section">
				<view class="section-title">活动须知</view>
				<text class="content-text">{{data.content}}</text>
			  </view>

			  <!-- 预约按钮 -->
		<!-- 	  <view class="reservation-btn" @click="handleReservation">
				立即预约
			  </view> -->
				</view>
				</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data:{},
				list:[],
				id:'',
				selectedDate: 0,
				selectedTime: '',
				groupedData:[],
				dateList: [],
				timeSlots: []
			}
		},
		onLoad(option) {
			this.id = option.id
			this.init()
		},
		methods: {
			init(){
				this.$rqt.getReservation({
					id:this.id
				}).then((res) => {
					if (res.code == 200) {
						var _this = this
						this.data = res.data
						let dateListB  = [
								...new Set(res.data.list.map((item) => item.daytime)),
							  ];
						this.groupedData = dateListB.map(date => ({
						  date:_this.monthAndDay(date),
						  week:_this.getWeekDay(date),
						  items: res.data.list.filter(item => item.daytime === date)
						}));
						console.log("his",this.groupedData)
						uni.hideLoading()
					}
					uni.hideLoading()
				})
			},
		   getWeekDay(dateStr) {
			  const date = new Date(dateStr);
			  const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
			  console.log("weekDays[date.getDay()]",weekDays[date.getDay()])
			  return weekDays[date.getDay()];
			},
		   monthAndDay(dateString) {
		      const date = new Date(dateString);
		      const month = date.getMonth() + 1; // 月份是从0开始的，所以要加1
		      const day = date.getDate();
		      return `${month}-${day}`; // 返回格式为 "MM-DD"
		  },
			selectDate(data,index) {
			  this.selectedDate = index
			},
			selectTime(item) {
			  this.selectedTime = item.id
			  uni.navigateTo({
			  	url:'/pages/indexOther/reservation?reservationid='+item.reservationid+'&id='+item.id
			  })
			},
			
			handleReservation(){
				this.$rqt.crateReservation({
					
				}).then((res) => {
					if (res.code == 200) {
						
						uni.hideLoading()
					}
					uni.hideLoading()
				})
				
			}
		},

	}
</script>

<style lang="scss">
	/* 日期选择样式 */
	.date-scroll {
	  margin: 40rpx 0;
	  white-space: nowrap;
	  .date-item {
	    display: inline-block;
	    width: 120rpx;
	    height: 120rpx;
	    margin-right: 20rpx;
	    border-radius: 16rpx;
	    background: #f5f5f5;
	    text-align: center;
	    padding: 20rpx;
	    box-sizing: border-box;
	    
	    &.active {
	      background: #e64340;
	      .week, .day { color: #fff; }
	    }
	    
	    .week {
	      display: block;
	      font-size: 24rpx;
	      color: #666;
	      margin-bottom: 12rpx;
	    }
	    .day {
	      font-size: 28rpx;
	      color: #333;
	      font-weight: bold;
	    }
	  }
	}
	
/* 时间段选择 */
.time-section {
  margin-top: 40rpx;
  .time-title {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 30rpx;
    font-weight: bold;
  }
  .time-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    .time-item {
      padding: 20rpx;
      border-radius: 16rpx;
      background: #f5f5f5;
      text-align: center;
      
      &.selected {
        background: #e64340;
		color: #fff;
        .time-text, .reservation-text { color: #fff !important; }
      }
      
      .time-text {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;
      }
      .reservation-info {
        margin-top: 10rpx;
        .reservation-text {
          display: block;
          font-size: 24rpx;
          color: #666;
        }
      }
    }
  }
}
	/* 活动内容 */
	.content-section {
	  margin-top: 60rpx;
	  .section-title {
	    font-size: 32rpx;
	    color: #333;
	    margin-bottom: 30rpx;
	    font-weight: bold;
	  }
	  .content-text {
	    font-size: 28rpx;
	    color: #666;
	    line-height: 1.8;
	  }
	}
	
	/* 预约按钮 */
	.reservation-btn {
	  position: fixed;
	  bottom: 40rpx;
	  left: 30rpx;
	  right: 30rpx;
	  height: 88rpx;
	  line-height: 88rpx;
	  text-align: center;
	  background: #e64340;
	  color: #fff;
	  font-size: 28rpx;
	  border-radius: 50rpx;
	  box-shadow: 0 4rpx 10rpx rgba(230, 67, 64, 0.3);
	}


</style>
